<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="py-2" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24" focusable="false"><title>Pizza</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
            </a>
            <router-link class="navbar-brand" :to="title.to">{{title.name}}</router-link>
            <ul class="navbar-nav">
                <li v-for="(navLeftList, key) in navLeftLists" :key="key"><router-link class="nav-link" :to="navLeftList.to" exact>{{navLeftList.name}}</router-link></li>
            </ul>
            <ul v-if="getIsLogin" class="navbar-nav ml-auto">
                <li><a class="nav-link" href="javascript:;">{{getUser.email}}</a></li>
                <li><a class="nav-link" href="javascript:;" @click="logout">退出</a></li>
            </ul>
            <ul v-else class="navbar-nav ml-auto">
                <li v-for="(navRightList, key) in navRightLists" :key="key"><router-link class="nav-link" :to="navRightList.to" exact>{{navRightList.name}}</router-link></li>
            </ul>
        </nav>
    </header>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                title: {to: {name: "Home"}, name: "Pizza点餐系统"},
                navLeftLists: [
                    {to: {name: "Home"}, name: "主页"},
                    {to: {name: "Menu"}, name: "菜单"},
                    {to: {name: "Admin"}, name: "管理"},
                    {to: {name: "AboutUs"}, name: "关于我们"},
                ],
                navRightLists: [
                    {to: {name: "Login"}, name: "登录"},
                    {to: {name: "Registered"}, name: "注册"},
                ]
            }
        },
        methods: {
            logout() {
                Bmob.User.logout();
                this.$store.dispatch("logout");
                this.$store.commit("setCarts");
                this.$router.push({name: "Login"});
            }
        },
        computed: {
            getIsLogin() {
                return this.$store.getters.getIsLogin;
            },
            getUser() {
                return this.$store.getters.getUser;
            }
        }
    }
</script>

<style scoped>
    header nav ul li .router-link-exact-active.router-link-active {color: #000;font-weight: bold;}
</style>